<template>
  <div class="checkout">
    <h2>订单结算</h2>
    
    <div class="order-items">
      <div v-for="item in cartItems" :key="item.id" class="order-item">
        <el-image :src="item.product.imageUrl" :alt="item.product.name" class="product-image" />
        <div class="item-info">
          <h3>{{ item.product.name }}</h3>
          <p>数量: {{ item.quantity }}</p>
          <p class="price">¥{{ item.product.price * item.quantity }}</p>
        </div>
      </div>
    </div>
    
    <div class="shipping-info">
      <h3>收货信息</h3>
      <el-form :model="shippingForm" :rules="rules" ref="formRef">
        <el-form-item label="收货人" prop="receiver">
          <el-input v-model="shippingForm.receiver" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="shippingForm.phone" />
        </el-form-item>
        <el-form-item label="收货地址" prop="address">
          <el-input type="textarea" v-model="shippingForm.address" />
        </el-form-item>
      </el-form>
    </div>
    
    <div class="payment-method">
      <h3>支付方式</h3>
      <el-radio-group v-model="paymentMethod">
        <el-radio label="ALIPAY">支付宝</el-radio>
        <el-radio label="WECHAT">微信支付</el-radio>
      </el-radio-group>
    </div>
    
    <div class="order-summary">
      <div class="total">
        总计: <span class="total-price">¥{{ totalAmount }}</span>
      </div>
      <el-button type="primary" :loading="submitting" @click="submitOrder">
        提交订单
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'

const store = useStore()
const router = useRouter()
const formRef = ref<FormInstance>()
const submitting = ref(false)

const cartItems = computed(() => store.state.cart.items)
const totalAmount = computed(() => {
  return cartItems.value.reduce((total, item) => {
    return total + item.product.price * item.quantity
  }, 0)
})

const shippingForm = ref({
  receiver: '',
  phone: '',
  address: ''
})

const paymentMethod = ref('ALIPAY')

const rules = {
  receiver: [{ required: true, message: '请输入收货人姓名' }],
  phone: [{ required: true, message: '请输入手机号' }],
  address: [{ required: true, message: '请输入收货地址' }]
}

const submitOrder = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate()
  
  submitting.value = true
  try {
    const orderData = {
      items: cartItems.value.map(item => ({
        productId: item.product.id,
        quantity: item.quantity
      })),
      shipping: shippingForm.value,
      paymentMethod: paymentMethod.value
    }
    
    const order = await store.dispatch('order/createOrder', orderData)
    await store.dispatch('cart/clearCart')
    
    ElMessage.success('订单创建成功')
    router.push(`/payment/${order.id}`)
  } catch (error) {
    ElMessage.error('创建订单失败')
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.checkout {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.order-items {
  margin: 20px 0;
}

.order-item {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 20px;
}

.shipping-info,
.payment-method {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.order-summary {
  margin-top: 20px;
  text-align: right;
}

.total-price {
  color: #f56c6c;
  font-size: 24px;
  font-weight: bold;
}
</style> 